<template>
    <div class="price">
        <div class="price_tit">
            <NavBar :tit="'价格筛选'"></NavBar>
        </div>
        <div class="price_houseCont">
            <HouseCont></HouseCont>
        </div>
        <div class="price_cont">
            <div class="price_select">
                <p v-for="(v,i) in price.price_Select" :key="i">
                    <span>{{v[i]}}</span>
                </p>
            </div>
            <div class="line_select">
                <p class="line_price">¥{{price.value[0]}}万-¥{{price.value[1]}}万</p>
                <van-slider v-model="price.value" range @change="changeSelect" min="0" max="1100" />
            </div>
        </div>
        <div class="price_sure">
            <HouseSure></HouseSure>
        </div>
    </div>
</template>

<script>
import { defineComponent , ref , onMounted, reactive, computed} from 'vue'
import { Toast } from 'vant'
export default defineComponent({
  setup(props,context) {
    const price = reactive({
        price_Select:[
            {
                '0':'不限'
            },
            {
                '1':'《10万'
            },
            {
                '2':'20万-30万'
            },
            {
                '3':'30万-50万'
            },
            {
                '4':'50万-100万'
            },
            {
                '5':'》1000万'
            }
        ],
        value:[100,1000]
    });

    // 滑块互动
    const changeSelect = (value) => {
        Toast(`当前值：${value}`)
    }


    return {
        price,
        changeSelect
    }
  },
})
</script>

<style lang='less' scoped>
.price{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .price_tit{
        width: 100%;
        height: 60px;
    }
    .price_houseCont{
        width: 100%;
    }
    .price_cont{
        margin-top: 40px;
        flex: 1;
        padding: 0 50px;
        .price_select{
            width: 100%;
            height: 300px;
            border-bottom: 1px solid #f6f5f5;
            p{
                width: 100%;
                height: 46px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9a9999;
                font-size: 15px;
            }
        }
        .line_select{
            width: 100%;
            margin-top: 25px;
            text-align: center;
            .line_price{
                margin-bottom: 25px;
                color: #e8807a;
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
    .price_sure{
        width: 100%;
        height: 64px;
    }
    
}
</style>
